<template>
<div class="box" 
    @mouseover="enter"
    @mouseout="ishover=false"
    :class="{ enter: ishover===true }"
    @click="addToCart"
    :style="{'--xPos': xPos,'--yPos': yPos}"
    ref="box"
    >
    <img style=" z-index: 2" :src="getImageUrl(url)" alt="等待上传">
    <h1 style="font-weight: bold;margin-left: 1rem; z-index: 2">{{ name }}</h1>
    <div style="margin-left: 1rem;font-size: 1rem; z-index: 2;word-break:break-all;">{{ text }}</div>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const props = defineProps(['name', 'url', 'text'])
const emit = defineEmits(['addCart'])
let ishover = ref<boolean>(false)
let xPos = ref("0px")
let yPos = ref("0px")
let box:any = document.querySelector('.box')
onMounted(()=>{
    box.addEventListener('mouseover',(event:any)=>{
    const x = (event.pageX - getX(box))
    let y = (event.pageY - getY(box))
    // console.log(event.pageX+" "+getX(box))
    // box.style.setProperty("--xPos", x + 'px')
    // box.style.setProperty('--yPos', y + 'px')
    xPos.value = x + 'px'
    yPos.value = y + 'px'
})
})
//递归获取组件的绝对定位
function getX(e:any){
    var offset = e.offsetLeft;
    if(e.offsetParent!=null){
        offset+=getX(e.offsetParent)
    }
    return offset
}
function getY(e:any){
    var offset = e.offsetTop;
    if(e.offsetParent!=null){
        offset+=getY(e.offsetParent)
    }
    return offset
}
function  enter(){
    //进入选项
    // ishover.value=true;
}
function addToCart(){
    //传递事件
    emit('addCart', {
        
    })
}
function getImageUrl(name: string):string{
    return new URL(name, import.meta.url).href;
}
</script>
<style scoped>
.main{
    display: flex;
    flex-direction:row;
}
.box{
    margin-top: 20px;
width: 90%;
height: 95%;
margin: 10px auto;
overflow: hidden;
border-radius: 10px;
transition: .5s;
}
.box::before{
  content: "";
  position: absolute;
  left: var(--xPos);
  top: var(--yPos);
  transform: translate(-50%,-50%);
  width: 0px;
  height: 0px;
  background-color: rgb(255, 72, 0);
  border-radius: 50%;
  z-index: 2;
  transition: width 0.7s,height 0.7s ;
}
.box:hover{
    color: aliceblue;
}
.box:hover::before{
    width: 1000px;
    height: 1000px;
}
img{
height: 70%;
width: 100%;
border-radius: 10px;
}
.enter{
background-color: rgb(237, 151, 86);
opacity: 0.9;
border-radius: 10px;
}
</style>